import React, { Component } from 'react'
import './register.scss'
import Header from '../../components/Header/header'
import { getApiRegister , getApiSend , getApiCompenyList } from "../../axios/api"
import { get } from '../../axios/localstorage'
// import { message } from 'antd'

export default class register extends Component {

    state = {
        username:'',
        password:'',
        truename:'',
        s_number:'',
        company:'',
        code:'',
        email:'',
        mobile:'',
        alert:false,
        isSend:false,
        countDownNum:60,
        companyList:[],
        showCompany:false,
        showMsg:false,
        msg:'',
    }

    componentWillMount(){
        getApiCompenyList({
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        })
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    companyList:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoRegister=()=>{

        if(!this.state.username){
            this.setState({
                showMsg:true,
                msg:"请先输入用户名！"
            })

            return false;
        }

        if(!this.state.username){
            this.setState({
                showMsg:true,
                msg:"请先输入密码！"
            })

            return false;
        }

        if(!this.state.s_number){
            this.setState({
                showMsg:true,
                msg:"请先输入学号！"
            })

            return false;
        }
        if(!this.state.truename){
            this.setState({
                showMsg:true,
                msg:"请先输入真实姓名！"
            })
            return false;
        }
        if(!this.state.email){
            this.setState({
                showMsg:true,
                msg:"请先输入邮箱！"
            })
            return false;
        }
        if(!this.state.mobile){
            this.setState({
                showMsg:true,
                msg:"请先输入手机号！"
            })
            return false;
        }
        if(!this.state.code){
            this.setState({
                showMsg:true,
                msg:"请先输入验证码！"
            })
            return false;
        }
        
        let param = {
            username:this.state.username,
            password:this.state.password,
            truename:this.state.truename,
            s_number:this.state.s_number,
            email:this.state.email,
            mobile:this.state.mobile,
            company:this.state.company,
            code:this.state.code,
        }

        getApiRegister(param)
        .then( req =>{
            if(req.data.code === 1){
                this.setState({
                    alert:true
                })
            }else{
                this.setState({
                    showMsg:true,
                    msg:req.data.msg,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    countDown=() =>{ 
        let countDownNum = this.state.countDownNum-1;//获取倒计时初始值
        //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
        this.timer = setInterval(() => {


            if(countDownNum<=0){
                clearInterval(this.timer);
                this.setState({ countDownNum:60,  isSend: false })
            }else{
                this.setState({
                    countDownNum:(countDownNum--)
                })
            }
        }, 1000);
    }

    gotoSend=()=>{

        if(!this.state.mobile){
            this.setState({
                showMsg:true,
                msg:"请先输入手机号！"
            })
            return false;
        }

        let param = {
            mobile:this.state.mobile,
            event:'register'
        }

        getApiSend(param)
        .then( req =>{
            console.log(req.data)
            if(req.data.code === 1){
                this.setState({
                    isSend:true
                })
                this.countDown();
            }else{
                this.setState({
                    msg:req.data.msg,
                    showMsg:true
                })
            }
        }).catch( err =>{
            console.error(err);
        })


    }

    render() {
        return (
            <div className="register" style={{backgroundImage:"url('assets/imgs/beijingyuansu.png')"}}>
                <Header  />
                <div className="main">
                    <div className="title">学员注册</div>
                    <div className="box">
                        <div className="item">
                            <p>用户名：</p>
                            <div className="ipt">
                                <input type="text" placeholder="输入用户名" value={this.state.username} onChange={(ev)=>{this.setState({username:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>密码：</p>
                            <div className="ipt">
                                <input type="password" placeholder="密码（6-16位字符组成，区分大小写）" value={this.state.password} onChange={(ev)=>{this.setState({password:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>学号：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入学号" value={this.state.s_number} onChange={(ev)=>{this.setState({s_number:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>单位：</p>
                            <div className="ipt" onClick={()=>{this.setState({showCompany:!this.state.showCompany})}} >
                                {/* <input type="text" placeholder="请输入单位" value={this.state.company} onChange={(ev)=>{this.setState({company:ev.target.value})}} /> */}
                                <h2 className={this.state.company?"":"i_none"}>{this.state.company?this.state.company:"请选择单位"}</h2>
                                <img alt="" src="assets/imgs/xialaxuanze.png" />
                                <div className="sels" hidden={!this.state.showCompany} onMouseLeave={()=>{this.setState({showCompany:false})}}>
                                    {
                                        this.state.companyList.map((item,index)=>{
                                            return <h4 key={index} className={this.state.company=== item.company_name?'hover':''} onClick={()=>{this.setState({company:item.company_name})}}>{item.company_name}</h4>
                                        })
                                    }
                                </div>
                            </div>
                        </div>
                        <div className="item">
                            <p className="pwt">真实姓名：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入真实姓名" value={this.state.truename} onChange={(ev)=>{this.setState({truename:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>邮箱：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入邮箱" value={this.state.email} onChange={(ev)=>{this.setState({email:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>手机号：</p>
                            <div className="ipt">
                                <input type="text" placeholder="请输入手机号码" value={this.state.mobile} onChange={(ev)=>{this.setState({mobile:ev.target.value})}} />
                            </div>
                        </div>
                        <div className="item">
                            <p>验证码：</p>
                            <div className="ibox">
                                <div className="ipt2">
                                    <input type="text" placeholder="请输入验证码" value={this.state.code} onChange={(ev)=>{this.setState({code:ev.target.value})}} />
                                </div>
                                <div onClick={()=>{this.gotoSend()}} className="sendbox" hidden={this.state.isSend}>发送验证码</div>
                                <div className="sendbox2" hidden={!this.state.isSend}>{this.state.countDownNum}s 后重发</div>
                            </div>
                        </div>
                        <div className="lmsg">
                            <p hidden={!this.state.showMsg}>{this.state.msg}</p>
                        </div>
                        <button onClick={()=>{this.gotoRegister()}}>注册</button>
                        <div onClick={()=>{this.gotoPage('/login')}} className="tologin">已有账号，直接登录</div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.alert}>
                    <div className="abox">
                        <div className="acen">
                            <img alt="" src="assets/imgs/chenggong.png" />
                        </div>
                        <h2>注册成功！</h2>
                        <p>请您用注册的账号和密码重新登录系统，感谢您的理解！</p>
                        <div className="acen">
                            <button onClick={()=>{this.gotoPage('/login')}}>好的，去登录</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
